A Note on Style Guides

As part of the project, you will generally follow the Udacity Style Guides on HTML and CSS. Style guides help to make your code more readable, useable, and easier to debug. Note that the project rubric has some of its own specific styling to follow.

Using a consistent style in your code is incredibly important as you progress on your developer journey. Of course, Udacity's style guide is not the only one out there, but it is the one you will use on your projects. There are a number of style guides available - the best one is the one used by the people who are paying you.

We did not focus as much on a specific style in the lessons, so you could focus more on learning each of the topics, but now, you'll want to make sure to integrate the style guide guidelines from the start - it's much easier to do so throughout, and only make a few fixes near the end, than to go back and re-style everything once you are finished.

An example

Let's take a quick look at an example of why following a style guide can be helpful for others viewing your code, as well as yourself.

First, here is some unindented HTML, where everything is to the left.

<table>
<thead>
<tr>
<th scope="col">Income</th>
<th scope="col">Taxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>$5.00</td>
<td>$4.50</td>
</tr>
</tbody>
</table>

It's a little difficult to see exactly what elements are where in this HTML. Especially as you get into much longer HTML files and webpages, this could quickly become impossible to read, increasing the likelihood of errors and hours spent debugging.

Now, how about the same code, but with indentation for each level of child elements?

<table>
    <thead>
        <tr>
            <th scope="col">Income</th>
            <th scope="col">Taxes</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$5.00</td>
            <td>$4.50</td>
        </tr>
    </tbody>
</table>

Both of these will display the same thing:

Even though the end result is the same, consistent styling will greatly increase readability of your code, reduce debugging time, and be much more impressive for a potential employer to look at.